<template>
  <div :style="{ height: '280px' }">
    <Transfer
      :data="allData"
      :target-keys="targetKeys"
      :render-format="render"
      :list-style="listStyle"
      :reverse-operation="true"
      @on-change="handleChange"
      @on-selected-change="handleSelectedChange"
      :titles="titles"
    >
      <div class="foot">
        <Icon type="md-arrow-round-up" @click="up" :color="'#2d8cf0'" />
        <Icon
          type="md-arrow-round-down"
          :color="'#2d8cf0'"
          @click="down"
          class="ml-5"
        />
        <Icon
          type="md-refresh"
          :color="'#2d8cf0'"
          class="ml-5"
          @click="refresh"
        />
      </div>
    </Transfer>
  </div>
</template>

<script>
export default {
  name: 'zzTransfer',
  emits: ['render', 'getTargetKeys'],
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: [],
    },
    listStyle: {
      type: Object,
      default: {},
    },
    titles: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      allData: this.data,
      targetKeys: [],
      sourceSelectedKeys: [],
      targetSelectedKeys: [],
    }
  },
  methods: {
    render(item) {
      return item.label
    },
    handleChange(newTargetKeys, direction, moveKeys) {
      this.targetKeys = newTargetKeys
      this.$emit('getTargetKeys', newTargetKeys)
    },
    handleSelectedChange(sourceSelectedKeys, targetSelectedKeys) {
      this.targetSelectedKeys = targetSelectedKeys
      this.sourceSelectedKeys = sourceSelectedKeys
    },
    up() {
      // 右侧
      if (this.targetSelectedKeys.length == 0) {
        console.log('No target selected')
        return
      }
      if (this.targetSelectedKeys.length > 1) {
        this.$Message.warning('选一个得了，要多少是多啊？')
        return
      }
      const index = this.targetKeys.indexOf(this.targetSelectedKeys[0])
      if (index == 0) {
        this.$Message.warning('到头了，别点了！')
        return
      }
      this.allData = this.upAllData(index + 1)
      this.targetKeys = this.upTargetKeys(index + 1)
      this.$emit('getTargetKeys', this.targetKeys)
    },
    down() {
      // 右侧
      if (this.targetSelectedKeys.length == 0) {
        console.log('No target selected')
        return
      }
      if (this.targetSelectedKeys.length > 1) {
        this.$Message.warning('选一个得了，要多少是多啊？')
        return
      }
      const index = this.targetKeys.indexOf(this.targetSelectedKeys[0])
      if (index == this.targetKeys.length - 1) {
        this.$Message.warning('到尾了，别点了！')
        return
      }
      this.allData = this.downAllData(index + 1)
      this.targetKeys = this.downTargetKeys(index + 1)
      this.$emit('getTargetKeys', this.targetKeys)
    },

    downAllData(index) {
      const mockData = this.allData.filter((_, i) => i !== index - 1)
      mockData.splice(index, 0, this.allData[index - 1])
      return mockData
    },

    downTargetKeys(index) {
      const keys = this.targetKeys.filter((_, i) => i !== index - 1)
      keys.splice(index, 0, this.targetKeys[index - 1])
      return keys
    },

    upAllData(index) {
      const mockData = this.allData.filter((_, i) => i !== index - 1)
      mockData.splice(index - 2, 0, this.allData[index - 1])
      return mockData
    },

    upTargetKeys(index) {
      const keys = this.targetKeys.filter((_, i) => i !== index - 1)
      keys.splice(index - 2, 0, this.targetKeys[index - 1])
      return keys
    },

    refresh() {
      this.allData = JSON.parse(
        JSON.stringify(this.allData.sort((a, b) => a.key - b.key))
      )
      this.targetKeys = JSON.parse(
        JSON.stringify(this.targetKeys.sort((a, b) => a - b))
      )
    },
    reset() {
      this.allData = JSON.parse(
        JSON.stringify(this.allData.sort((a, b) => a.key - b.key))
      )
      this.allData.forEach((i) => (i.disabled = true))
      this.targetKeys = []
    },
  },
}
</script>

<style lang="less" scoped>
.foot {
  float: right;
  margin: 8px;
}
.ivu-icon {
  // color: #6e7071;
  cursor: pointer;
}
:deep(
    .ivu-transfer
      .ivu-transfer-list:first-of-type
      .ivu-transfer-list-footer
      .ivu-icon-md-arrow-round-up
  ) {
  display: none;
}
:deep(
    .ivu-transfer
      .ivu-transfer-list:first-of-type
      .ivu-transfer-list-footer
      .ivu-icon-md-arrow-round-down
  ) {
  display: none;
}
</style>
